/**
 * Created by xiteng on 2017/5/27.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    ScrollView,
    PixelRatio,
    NativeModules,
    Keyboard,
    Platform,
    StyleSheet
} from 'react-native';
import SearchBox from '../component/SearchBox'
import Constant from '../Contant'
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import addressMgrStore, {Address} from '../store/AddrMgrStore'
import MapCom from "./MapCom";

let AMapService = NativeModules.AMapService;

// 通用地址cell
const AddrCell = ({addr, click}) => {
    let district = addr.city == null ? addr.district : addr.city + addr.district;
    return <TouchableOpacity
        onPress={click}
        style={{
            paddingHorizontal: 10,
            paddingVertical: 15,
            backgroundColor: '#fff',
            borderBottomWidth: StyleSheet.hairlineWidth,
            borderBottomColor: Constant.SEPLINECOLOR
        }}>
        <Text style={{fontSize: 13, color: Constant.TEXTTITLECOLOR, paddingBottom: 5}}>{district}</Text>
        <Text style={{fontSize: 12, color: Constant.TEXTTITLECOLOR}}>{addr.address}</Text>
    </TouchableOpacity>
}

const CurrentAddrCell = ({poi, click}) => {
    let {uid, address, location, distance, name, city, district} = poi
    return <TouchableOpacity onPress={click}
                             style={[{padding: 10, backgroundColor: '#fff'}, styles.borderBottom]}>
        <Text style={{color: Constant.TEXTTITLECOLOR, fontSize: 14, paddingVertical: 4}}>{city}{district}</Text>
        <Text style={{color: Constant.TEXTCONTENTCOLOR, fontSize: 12}}>{address}</Text>
    </TouchableOpacity>
}




const Content = observer(({navigation}) => {
    return <View style={{flexGrow: 3, flex: 1}}>
        <ScrollView
            onScroll={() => {
                Keyboard.dismiss()
            }}
        >
            {
                addressMgrStore.mapAuto.neighborList.map((poi, index) => {
                    return <CurrentAddrCell
                        poi={poi}
                        key={index}
                        click={() => {
                            //选择当前位置
                            //修改 activeAddress地址
                            let addrM = addressMgrStore.mapAuto.convertPOI2Address(poi);
                            addressMgrStore.setSelected(addrM);
                            navigation.goBack();
                        }}/>
                })
            }
        </ScrollView>
    </View>
})


export default class CurrentAddr extends Component {

    // 附近位置列表
    @observable pois = [];

    render() {
        return <View style={{
            flex: 1,
            backgroundColor: Constant.GRAYBGCOLOR
        }}>
            <View style={{
                marginHorizontal: 10,
                marginVertical: 5,
                alignItems: 'center'
            }}>
                <SearchBox
                    onClick={() => {
                        this.props.navigation.navigate('SearchAddress') ;
                    }}
                    placeholder="搜索地址"
                    textChange={(keyword) => {
                        let cityName = LocationStore.cityPOI.fullName;
                        addressMgrStore.mapAuto.searchByWord(keyword, cityName);
                    }}/>
            </View>
            <View style={{flex: 1}}>
                <MapCom/>
                <Content
                    navigation={this.props.navigation}/>
            </View>
        </View>
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: 1 / PixelRatio.get()
    },
    city: {
        flexGrow: 1,
        backgroundColor: '#fff',
        height: Platform.OS === 'ios' ? 35 : 45,
        alignItems: 'center',
        justifyContent: 'center',
        borderRightColor: Constant.SEPLINECOLOR,
        borderRightWidth: StyleSheet.hairlineWidth
    }
}